<!--
 * @Date: 2023-02-27 19:06:54
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-07 14:25:40
 * @FilePath: \sososn-web-new\src\views\bulkIndustry\component\industrialCore.vue
-->
<template>
  <div class="group">
    <h1 class="title" data-aos="fade-up">产品核心功能</h1>
    <div class="section">
      <ul class="section-list flex-row" data-aos="fade-up" data-aos-delay="100">
        <li v-for="(el, i) in sectionList" :key="i" class="list-item">
          <ul class="item">
            <li class="item-1"><svg-icon class="icon" :name="el.icon" /></li>
            <li class="item-2">{{ el.title }}</li>
            <li class="item-3">
              {{ el.desc }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const { industrialCore } = inject('productData')
let sectionList = industrialCore.sectionList
</script>

<style lang="scss" scoped>
.group {
  .title {
    margin: 70px 0;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 38px;
    font-weight: 500;
    color: #333;
    text-align: center;
  }

  .section-list {
    padding: 0 240px;
    flex-wrap: wrap;
    margin-bottom: 90px;
    gap: 30px 24px;

    .list-item {
      width: 342px;
      height: 300px;
      cursor: pointer;
      background: #fff;
      border-radius: 8px;
      transform: translateY(0);
      box-shadow: 0 2px 13px 0 rgb(221 221 221 / 34%);
      transition: all 300ms ease-in-out 0s;

      .item {
        li {
          padding: 0 25px;
          margin-top: 30px;
          text-align: center;
        }

        .icon {
          width: 32px;
          height: 32px;
        }

        .item-2 {
          font-size: 24px;
          font-weight: 500;
          color: #000;
        }

        .item-3 {
          font-size: 16px;
          color: #666;
        }

        .item-4 {
          font-size: 16px;
          color: #333;
          cursor: pointer;
        }
      }

      &:hover {
        transform: translateY(-10px);
        box-shadow: 7px 5px 30px 2px rgb(163 176 203 / 26%);
      }
    }
  }
}
</style>
